import type { SxProps, Theme } from '@mui/material'
import { Box } from '@mui/material'
import type { SyntheticEvent } from 'react'

export interface IconParkIconElement extends HTMLElement {
  'icon-id'?:
      | '647367'
      | '684408'
      | '684409'
      | '684411'
      | '684412'
      | '684413'
      | '684414'
      | '686740'
      | '686741'
      | '686742'
      | '686743'
      | '686744'
      | '686745'
      | '686746'
      | '686747'
      | '686748'
      | '686749'
      | '686750'
      | '686751'
      | '686752'
      | '686753'
      | '686754'
      | '686993'
      | '687741'
      | '687742'
      | '691262'
      | '691537'
      | '691538'
      | '691806'
      | '695738'
      | '695739'
      | '695740'
      | '695741'
      | '695742'
      | '695743'
      | '695746'
      | '695747'
      | '695748'
      | '695750'
      | '695751'
      | '695752'
      | '695754'
      | '695755'
      | '695756'
      | '695758'
      | '695759'
      | '695760'
      | '695761'
      | '695762'
      | '695763'
      | '695764'
      | '695801'
      | '695802'
      | '695803'
      | '695804'
      | '695805'
      | '695806'
      | '695807'
      | '695810'
      | '695811'
      | '695812'
      | '695817'
      | '695818'
      | '695819'
      | '695820'
      | '695821'
      | '695822'
      | '695828'
      | '695829'
      | '695830'
      | '695831'
      | '695833'
      | '695834'
      | '695835'
      | '695836'
      | '695837'
      | '695838'
      | '695839'
      | '695840'
      | '695841'
      | '695842'
      | '695844'
      | '695845'
      | '695846'
      | '695865'
      | '695867'
      | '695868'
      | '695869'
      | '695870'
      | '695876'
      | '695877'
      | '695878'
      | '695883'
      | '695884'
      | '695886'
      | '695887'
      | '695888'
      | '695889'
      | '695890'
      | '695891'
      | '695892'
      | '695893'
      | '695896'
      | '695899'
      | '695900'
      | '695901'
      | '695902'
      | '695903'
      | '695904'
      | '695905'
      | '695906'
      | '695907'
      | '695908'
      | '695909'
      | '695913'
      | '695914'
      | '695915'
      | '695916'
      | '695933'
      | '695934'
      | '695935'
      | '695936'
      | '695938'
      | '695940'
      | '695941'
      | '695942'
      | '695944'
      | '695945'
      | '695946'
      | '695947'
      | '695948'
      | '695950'
      | '695951'
      | '695953'
      | '695954'
      | '695955'
      | '695956'
      | '695957'
      | '695958'
      | '695959'
      | '695960'
      | '695961'
      | '695962'
      | '695963'
      | '695964'
      | '695966'
      | '695967'
      | '695968'
      | '695969'
      | '695971'
      | '695972'
      | '695973'
      | '695975'
      | '695978'
      | '695979'
      | '695980'
      | '695981'
      | '695982'
      | '695984'
      | '695985'
      | '695986'
      | '695987'
      | '695988'
      | '695990'
      | '695993'
      | '695995'
      | '695997'
      | '695999'
      | '696002'
      | '696003'
      | '696004'
      | '696005'
      | '696007'
      | '696009'
      | '696010'
      | '696011'
      | '696012'
      | '696013'
      | '696014'
      | '696015'
      | '696016'
      | '696017'
      | '696018'
      | '696019'
      | '696020'
      | '696021'
      | '696022'
      | '696023'
      | '696024'
      | '696025'
      | '696027'
      | '696028'
      | '696029'
      | '696030'
      | '696031'
      | '696032'
      | '696033'
      | '696034'
      | '696035'
      | '696036'
      | '696037'
      | '696038'
      | '696039'
      | '696040'
      | '696041'
      | '696042'
      | '696043'
      | '696044'
      | '696045'
      | '696046'
      | '696048'
      | '696049'
      | '696660'
      | '696661'
      | '744163'
      | '744173'
      | '744175'
      | '750656'
      | '752737'
      | '756392'
      | '757321'
      | '757499'
      | '757504'
      | '757518'
      | '757519'
      | '757520'
      | '757521'
      | '757616'
      | '757650'
      | '767277'
      | '767278'
      | '775549'
      | '779333'
      | '779418'
      | '779705'
      | '779706'
      | '787702'
      | '788577'
      | '802334'
      | '804269'
      | '804612'
      | '804614'
      | '806103'
      | '813707'
      | '815901'
      | '820089'
      | '826687'
      | '854318'
      | '855246'
      | '855247'
      | '855248'
      | '855927'
      | '855928'
      | '855929'
      | '855938'
      | '857931'
      | '857985'
      | '861388'
      | '876705'
      | '884011'
      | '885387'
      | '897026'
      | '915485'
      | '929257'
      | '932197'
      | '949128'
      | '970590'
      | '973801'
      | '985435'
      | '1002903'
      | '1021623'
      | '1021686'
      | '1035721'
      | '1035737'
      | '1037074'
      | '1037815'
      | '1037816'
      | '1037817'
      | '1039918'
      | '1042170'
      | '1042171'
  name?:
      | 'round-fill'
      | 'apinto-pro-icon'
      | 'apinto-icon'
      | 'apinto-pro'
      | 'apinto'
      | 'check-circle'
      | 'apispace'
      | 'auto-generate-api'
      | 'compare-api'
      | 'multi-protocal'
      | 'read-good'
      | 'richdoc'
      | 'mockapi'
      | 'script-support'
      | 'diy-test'
      | 'send'
      | 'stereo-perspective'
      | 'automatic-robot'
      | 'switch-env'
      | 'flash'
      | 'chart-pie'
      | 'date-drive'
      | 'apistudio'
      | 'postcat-icon'
      | 'postcat'
      | 'apistudio-icon'
      | 'update-rotation'
      | 'page'
      | 'apispace-icon'
      | 'avatar'
      | 'people'
      | 'people-minus'
      | 'people-plus'
      | 'peoples'
      | 'user-business'
      | 'folder-close-fill'
      | 'windows'
      | 'github'
      | 'qq'
      | 'browser-chrome'
      | 'linux'
      | 'edge'
      | 'wechat'
      | 'browser'
      | 'gitlab'
      | 'apple'
      | 'alipay'
      | 'facebook'
      | 'twitter'
      | 'paypal'
      | 'new-lark'
      | 'delete'
      | 'return'
      | 'search'
      | 'import'
      | 'export'
      | 'add'
      | 'add-child'
      | 'file-addition'
      | 'add-circle'
      | 'minus'
      | 'close'
      | 'close-small'
      | 'check-small'
      | 'check'
      | 'code-terminal'
      | 'code'
      | 'preview-open'
      | 'preview-close'
      | 'folder-close'
      | 'folder-open'
      | 'upload'
      | 'download'
      | 'copy'
      | 'upload-file'
      | 'compare'
      | 'edit'
      | 'share'
      | 'share-all'
      | 'share-url-fill'
      | 'share-url'
      | 'back'
      | 'back-fill'
      | 'share-fill'
      | 'sort'
      | 'filter'
      | 'reduce'
      | 'done-all'
      | 'full-selection'
      | 'right-bar'
      | 'left-bar'
      | 'direction-adjustment'
      | 'down-small'
      | 'left-small'
      | 'right-small'
      | 'right-one'
      | 'right'
      | 'up'
      | 'up-one'
      | 'up-small'
      | 'up-two'
      | 'down-two'
      | 'enter'
      | 'down'
      | 'left'
      | 'down-one'
      | 'left-two'
      | 'right-two'
      | 'left-one'
      | 'more'
      | 'expand-left'
      | 'expand-right'
      | 'column'
      | 'center-alignment'
      | 'list-add'
      | 'sort-amount-down'
      | 'sort-amount-up'
      | 'list'
      | 'remind'
      | 'close-remind'
      | 'api'
      | 'rocket'
      | 'monitor'
      | 'robot'
      | 'plan'
      | 'application'
      | 'chart-proportion'
      | 'data'
      | 'chart-line'
      | 'pie-10'
      | 'pie'
      | 'chart-bubble'
      | 'cube'
      | 'application-menu'
      | 'crown'
      | 'crown-fill'
      | 'market'
      | 'file-word'
      | 'file-excel'
      | 'hashtag-key'
      | 'file-hash'
      | 'refresh'
      | 'order'
      | 'command'
      | 'branch'
      | 'page-template'
      | 'smart-optimization'
      | 'assembly-line'
      | 'stopwatch'
      | 'checklist'
      | 'menu-fold'
      | 'menu-unfold'
      | 'alarm'
      | 'protection'
      | 'caution'
      | 'openapi'
      | 'webhook'
      | 'holding-hands'
      | 'support'
      | 'agreement'
      | 'community'
      | 'roadmap'
      | 'family-7knl2ae1'
      | 'smiling-face'
      | 'play-fill'
      | 'play'
      | 'pause'
      | 'magic'
      | 'whole-site-accelerator'
      | 'link-cloud-faild'
      | 'link-cloud-sucess'
      | 'translate'
      | 'funds'
      | 'unhappy-face'
      | 'message'
      | 'connection-arrow'
      | 'loading'
      | 'fork'
      | 'quote'
      | 'headset'
      | 'attention'
      | 'theme'
      | 'keyboard'
      | 'briefcase'
      | 'star'
      | 'star-7knmka28'
      | 'protect'
      | 'finance'
      | 'setting'
      | 'link'
      | 'undo'
      | 'inbox-success'
      | 'home'
      | 'local'
      | 'laptop'
      | 'view-list'
      | 'lock'
      | 'unlock'
      | 'lightning'
      | 'file-text'
      | 'cooperative-handshake'
      | 'navigation'
      | 'view-grid-detail'
      | 'help'
      | 'history'
      | 'logout-7knnioon'
      | 'chinese'
      | 'calendar'
      | 'play-cycle'
      | 'world'
      | 'plugins'
      | 'link-cloud'
      | 'book'
      | 'table-report'
      | 'qiyeweixin'
      | 'Oauth'
      | 'dingding'
      | 'eolink'
      | 'tool'
      | 'category-management'
      | 'folder-code-one'
      | 'link-three-8ah7lifn'
      | 'download-two-8ah85008'
      | 'quanjusuoxiao1'
      | 'quanjufangda21'
      | 'quanjusuoxiao211'
      | 'quanjufangda1'
      | 'wenjianshezhi'
      | 'key'
      | 'zidingyijiaoben'
      | 'tiqubianliang'
      | 'mock'
      | 'tongzhishezhi'
      | 'csdn'
      | 'ceshibaogao'
      | 'biangengtongzhi'
      | 'icon-api'
      | 'youjian'
      | 'pushpin'
      | 'announcement'
      | 'collapse-text-input'
      | 'zhankai'
      | 'replay-music'
      | 'download-web'
      | 'permissions'
      | 'file-editing'
      | 'wallet'
      | 'file-focus'
      | 'pingpu-9a913n0n'
      | 'zuoyoufenping-9a913n1f'
      | 'shangxiafenping-9a913n1i'
      | 'Paypal11'
      | 'zhifubaozhifu1'
      | 'weixinzhifu11'
      | 'weixinzhifu'
      | 'update-rotation-9and40f5'
      | 'terminal'
      | 'switch'
      | 'zhinengrucan'
      | 'biaoqian-banbenleixinzeng'
      | 'book-open'
      | 'morentouxiang-2'
      | 'xiajia'
      | 'drag'
      | 'new-up'
      | 'rss'
      | 'yewuchangjing'
      | 'newlybuild'
      | 'bianji'
      | 'jiekoushouquan'
      | 'interfacefenzutubiao'
      | 'yidong'
      | 'link-one'
      | 'canshugouzaoqi'
      | 'bianliang'
      | 'tars'
      | 'if'
      | 'tars-2'
      | 'yingyongguanxi'
      | 'save-one'
      | 'save'
  size?: string
  width?: string
  height?: string
  color?: string
  stroke?: string
  fill?: string
  rtl?: string
  spin?: string
}


interface IconProps extends IconParkIconElement {
  px: number
  /** Padding left */
  pl: number
  /** Padding right */
  pr: number
  /* ml + mr */
  mx: number
  /** Margin left */
  ml: number
  /** Margin right */
  mr: number
  sx: SxProps<Theme>
  onClick?: (event: SyntheticEvent) => void
}

declare namespace JSX {
  interface IntrinsicElements {
    'iconpark-icon': Partial<IconParkIconElement>
  }
}

// @ts-ignore
export function Icon({name, size, fill, color, px, mx, ml, mr, pl, pr, sx, onClick}: Partial<IconProps>): JSX.Element {
  // @ts-ignore
  return (
    <Box
      alignItems="center"
      display="flex"
      justifyContent="center"
      mx={mx ?? 1}
      px={px ?? 1}
      ml={ml}
      mr={mr}
      pl={pl}
      pr={pr}
      sx={sx}
      onClick={onClick}
    >
      <iconpark-icon color={color} fill={fill} name={name} size={size} />
    </Box>
  )
}
